<template>
  <a-modal
    :title="`${model ? '编辑' : '新增'}账号`"
    :width="700"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loadingSpin" :style="{ padding: '0 50px' }">
      <a-form :form="form" v-bind="formLayout">
        <a-row>
          <a-col>
            <a-form-item v-show="false" label="主键ID">
              <a-input v-decorator="['uid', { initialValue: 0 }]" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item label="请选择省" :labelCol="{ span: 10 }" :wrapperCol="{ span: 14 }">
              <a-select v-decorator="['provinceid']" placeholder="请选择省" @change="onProvinceChange">
                <a-select-option :value="item.provinceid" v-for="item in provinceList" :key="item.provinceid">{{
                  item.province
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" :offset="1">
            <a-form-item :wrapperCol="{ span: 24 }">
              <a-select v-decorator="['cityid']" placeholder="请选择市" @change="onCityChange">
                <a-select-option :value="item.cityid" v-for="item in cityList" :key="item.cityid">{{
                  item.city
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" :offset="1">
            <a-form-item :wrapperCol="{ span: 24 }">
              <a-select
                v-decorator="['areaid']"
                placeholder="请选择区"
                @change="
                  onAreaChange({
                    areaid: $event,
                    provinceid: form.getFieldValue('provinceid'),
                    cityid: form.getFieldValue('cityid')
                  })
                "
              >
                <a-select-option :value="item.areaid" v-for="item in areaList" :key="item.areaid">{{
                  item.area
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="我要洗衣" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <a-select v-decorator="['clothes_store_id']" placeholder="请选择">
                <a-select-option :value="item.id" v-for="item in clothesList" :key="item.id">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="家电清洗" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <a-select v-decorator="['appliance_store_id']" placeholder="请选择">
                <a-select-option :value="item.id" v-for="item in applianceList" :key="item.id">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="家政服务" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <a-select v-decorator="['house_store_id']" placeholder="请选择">
                <a-select-option :value="item.id" v-for="item in houseList" :key="item.id">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="用户名" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input v-decorator="['name']" placeholder="登录用户名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="密码" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input v-decorator="['password']" placeholder="密码" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="手机号" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-input v-decorator="['mobile']" placeholder="手机号" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="性别" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
              <a-select v-decorator="['sex', { initialValue: 1 }]" placeholder="请选择性别">
                <a-select-option :value="1">男</a-select-option>
                <a-select-option :value="2">女</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="角色" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
              <a-select v-decorator="['role_id']" placeholder="请选择角色">
                <a-select-option :value="item.id" v-for="item in roleList" :key="item.id">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { provinceLink, cityLink, areaLink } from '@/api/notControl'
import { getStoreList, managerAdd, managerEdit } from '@/api/managerStore'
import formModalMixin from '@/mixins/formModalMixin'
import { getRoleList } from '@/api/role'

const fields = [
  'name',
  'areaid',
  'cityid',
  'sex',
  'role_id',
  'uid',
  'mobile',
  'provinceid',
  'clothes_store_id',
  'house_store_id',
  'appliance_store_id'
]

export default {
  mixins: [formModalMixin],
  data () {
    this.fields = fields
    this.addAction = managerAdd
    this.editAction = managerEdit
    return {
      provinceList: [],
      cityList: [],
      areaList: [],
      applianceList: [],
      clothesList: [],
      houseList: [],
      loadingSpin: false,
      roleList: [],
      formLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        }
      }
    }
  },
  created () {
    getRoleList().then(res => {
      this.roleList = res.data.data
    })
    provinceLink().then(res => {
      this.provinceList = res.data
    })
  },
  methods: {
    watchBefore (model) {
      this.loadingSpin = true
      const { provinceid, cityid, areaid } = model
      return Promise.all([
        this.onProvinceChange(provinceid),
        this.onCityChange(cityid),
        this.onAreaChange({ provinceid, cityid, areaid })
      ])
      .finally(() => (this.loadingSpin = false))
    },
    onProvinceChange (provinceid) {
      return cityLink({ provinceid }).then(res => {
        this.cityList = res.data
        this.form.setFieldsValue({ cityid: undefined })
      })
    },
    onCityChange (cityid) {
      return areaLink({ cityid }).then(res => {
        this.areaList = res.data
        this.form.setFieldsValue({ areaid: undefined })
      })
    },
    onAreaChange ({ areaid, provinceid, cityid }) {
      return getStoreList({ provinceid, cityid, areaid }).then(res => {
        this.applianceList = res.data.appliance
        this.clothesList = res.data.clothes
        this.houseList = res.data.house
      })
    },
    handleOkBefore (values) {
      const province = this.provinceList.find(province => province.provinceid === values['provinceid'])
      const city = this.cityList.find(city => city.cityid === values['cityid'])
      const area = this.areaList.find(area => area.areaid === values['areaid'])
      const params = {
        ...values,
        province: (province && province.province) || undefined,
        city: (city && city.city) || undefined,
        area: (area && area.area) || undefined
      }
      return params
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-modal-body {
  padding: 24px 48px;
}
</style>
